<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-renewal-container`]">
      <view class="card">
        <view class="title">房间信息</view>
        <view class="room-name">{{ room.project_name }}</view>
        <view class="building">{{ room.room_name }}</view>
        <view class="tag-wrap">
          <view class="tag-item">{{ room.room_type_name }}</view>
          <view class="tag-item">{{ room.area }}</view>
        </view>
        <view class="price">
          <text class="count">{{ room.monthly_rent }}</text>
          <text class="unit">元/月</text>
        </view>
      </view>
      <!-- 企业员工专属优惠 -->
      <view class="card">
        <view class="title">企业员工专属优惠</view>
        <view class="row">
          <view class="left">企业认证</view>
          <view class="right">{{ companyInfo.enterprise_name }}</view>
        </view>
        <!-- <view class="row">
          <view class="left">租金折扣</view>
          <view class="right">{{ companyInfo.discount }}</view>
        </view> -->
        <view class="row">
          <view class="left">有效期</view>
          <view class="right">{{ companyInfo.expiration_date }}</view>
        </view>
        <view class="row border-none">
          <view class="left">企业权益</view>
          <view class="right">{{ companyInfo.equity_content }}</view>
        </view>
        <view class="small-tips">*实际优惠以门店最终确认为主</view>
      </view>
      <!-- 合同租期 -->
      <view class="card">
        <view class="title">合同租期</view>
        <view class="row">
          <view class="left">起租日期</view>
          <view class="right">{{ room.begin_date }}</view>
        </view>
        <view class="row">
          <view class="left">截至日期</view>
          <view class="right">{{ room.end_date }}</view>
        </view>
      </view>
      <!-- 缴费约定 -->
      <view class="card">
        <view class="title">{{ agreement.name }}</view>
        <view v-for="(item, index) in agreement.list" :key="index" class="row">
          <view class="left">{{ item.title }}</view>
          <view class="right">{{ item.des }}</view>
        </view>
      </view>
      <!-- 其他费项 -->
      <view class="card" v-for="(item, index) in feeitem_array" :key="index" :style="{ padding: item.list.length ? '10px' : 0 }">
        <template v-if="item.list.length">
          <view class="title">{{ item.title }}</view>
          <view class="row" v-for="(items, indexs) in item.list" :key="indexs">
            <view class="left">{{ items.type }}</view>
            <view class="right">{{ items.des }}</view>
          </view>
        </template>
      </view>
      <!-- 签约租户信息 -->
      <view class="card">
        <view class="title">签约租户信息</view>
        <view class="row">
          <view class="left">租客姓名</view>
          <view class="right">{{ customer.name }}</view>
        </view>
        <view class="row">
          <view class="left">大陆身份证</view>
          <view class="right">{{ customer.card_num }}</view>
        </view>
        <view class="row">
          <view class="left">联系电话</view>
          <view class="right">{{ customer.tel }}</view>
        </view>
        <view class="row">
          <view class="left">通讯地址</view>
          <view class="right">{{ customer.address }}</view>
        </view>
        <view class="row">
          <view class="left">邮箱</view>
          <view class="right">{{ customer.e_mail }}</view>
        </view>
      </view>
      <!-- 紧急联系人 -->
      <view class="card">
        <view class="title">紧急联系人</view>
        <view class="row">
          <view class="left">紧急联系人姓名</view>
          <view class="right">{{ customer.emergency_name }}</view>
        </view>
        <view class="row">
          <view class="left">紧急联系人手机号</view>
          <view class="right">{{ customer.emergency_tel }}</view>
        </view>
      </view>
      <view class="fixed-wrap">
        <view class="fixed-button">
          <uv-button type="primary" text="放弃签字" :plain="true" customStyle="margin-top: 10px" @click="giveUp"></uv-button>
          <uv-button type="primary" text="确认签字" customStyle="margin-top: 10px" @click="sign"></uv-button>
        </view>
        <uv-safe-bottom></uv-safe-bottom>
      </view>
    </view>
    <popupRecognition ref="ref-popupRecognition"></popupRecognition>
  </cu-layout>
</template>

<script>
import popupRecognition from '@/pages/components/popupRecognition.vue'
import { mapActions, mapGetters } from 'vuex'
import { getContractDetail, getSignUrl, renewGiveUp } from './api'
export default {
  name: 'componentName',
  components: {
    popupRecognition,
  },
  mixins: [],
  props: {},
  data() {
    return {
      room: {},
      agreement: {},
      feeitem_array: [],
      customer: {},
      online_sign_info: {
        sign_platform: '',
        agreenment_page_url: '',
        sign_platform_name: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters(['userInfo']),
    companyInfo() {
      let info = {}
      if (this.userInfo?.company_info) {
        info = {
          ...this.userInfo.company_info,
          discount: this.userInfo.company_info.discount ? this.userInfo.company_info.discount + '%' : '',
          expiration_date: this.userInfo.company_info.begin_date ? this.userInfo.company_info.begin_date + ' 至 ' + this.userInfo.company_info.end_date : '',
        }
      }
      return info
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  async onLoad(options) {
    await this.getData()
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions([]),
    async getData() {
      const { id } = this.$Route.query
      const { data } = await getContractDetail({ id })
      this.room = data.room
      this.room.begin_date = this.room.begin_date ? this.room.begin_date.split(' ')[0] : ''
      this.room.end_date = this.room.end_date ? this.room.end_date.split(' ')[0] : ''
      this.agreement = data.agreement
      this.customer = data.customer
      this.feeitem_array = data.feeitem_array
      for (let key in this.online_sign_info) {
        this.online_sign_info[key] = data.online_sign_info[key]
      }
    },
    async getSignUrl() {
      const { id } = this.$Route.query
      let url = ''
      // sign 1 为新签 2为续签
      // #ifdef MP-WEIXIN
      url = `/pages/subpackage/online-signing/signing-result?id=${id}&sign=2`
      // #endif
      // #ifdef APP-PLUS
      url = `sxj://pages/subpackage/online-signing/signing-result?id=${id}&sign=2`
      // #endif
      // #ifdef H5
      url = `${this.$Helper.getRootUrl()}pages/subpackage/online-signing/signing-result?id=${id}&sign=2`
      // #endif
      const { data } = await getSignUrl({ id, url })
      this.$ROUTE.go(data.url)
    },
    // 放弃签字
    giveUp() {
      const { id } = this.$Route.query
      uni.showModal({
        title: '放弃签字',
        content: `本次续租签约将关闭。如果您还希望签约，需要重新办理！请确认是否放弃？`,
        confirmText: '确定',
        showCancel: true,
        success: async ({ confirm }) => {
          if (!confirm) return
          const { errcode } = await renewGiveUp({ id })
          if (errcode === 0) {
            this.$ROUTE.go('/pages/subpackage/contract/index')
          }
        },
      })
    },
    async sign() {
      await this.getSignUrl()
      // const { agreenment_page_url } = this.online_sign_info
      // this.$ROUTE.go(agreenment_page_url)
      // this.$refs['ref-popupRecognition'].handleOpen({ scene: 'bill' })
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('renewal-container')} {
  position: relative;
  background: #f5f5f5;
  box-sizing: border-box;
  overflow: hidden;
  padding: 32rpx 32rpx 200rpx;
  .card {
    background: white;
    border-radius: 8rpx;
    padding: 20rpx;
    position: relative;
    margin-bottom: 20rpx;
    &:last-child {
      background: red;
    }
    .title {
      font-weight: bold;
      margin-bottom: 10rpx;
      padding-left: 20rpx;
      position: relative;
      display: flex;
      align-items: center;
      &::before {
        content: ' ';
        position: absolute;
        left: 0;
        width: 3px;
        height: 26rpx;
        border-radius: 4rpx;
        background: $uv-primary;
      }
    }
    .room-name,
    .building {
      font-size: 24rpx;
      margin-bottom: 10rpx;
    }
    .tag-wrap {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      overflow: hidden;
      .tag-item {
        font-size: 20rpx;
        border: 2rpx solid #f1f1f1;
        padding: 5rpx;
        margin-right: 20rpx;
        margin-top: 10rpx;
        margin-bottom: 10rpx;
      }
    }
    .price {
      position: absolute;
      right: 20rpx;
      bottom: 30px;
      .count {
        color: $uv-price-primary;
        font-size: 40rpx;
      }
      .unit {
        margin-left: 10rpx;
        font-size: 24rpx;
      }
    }
    .row {
      display: flex;
      font-size: 24rpx;
      padding: 20rpx 0 16rpx;
      border-bottom: 2rpx solid #f1f1f1;
      &:last-child {
        border: 0;
      }
      .right {
        margin-left: auto;
      }
    }
  }
  .fixed-wrap {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    background: linear-gradient(to bottom, white, #f5f5f5);
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    border-top: 1px solid #f1f1f1;
    .fixed-button {
      display: flex;
      ::v-deep .uv-button-wrapper {
        flex: 1;
        margin: 0 15px;
      }
    }
  }
  .border-none {
    border: 0 !important;
  }
  .small-tips {
    font-size: 24rpx;
    color: #999999;
    padding-top: 20rpx;
  }
}
</style>
